<template> 
 	<div class='wrapper'>
 		<swiper :options="swiperOption" v-if="showswiper">
        <!-- slides -->
        <swiper-slide v-for='item of list' :key='item.id'>
          <img class='swiperimg' :src="item.imgUrl">
        </swiper-slide>
        <!-- Optional controls --> 
        <div class="swiper-pagination"  slot="pagination"></div>
		</swiper>  
 	</div> 
</template>

<script>
export default {
    name:'homeswiper',
    props:{
      list:Array
    },
    data(){
        return{
            swiperOption:{
              pagination:'.swiper-pagination',
              loop:true
            }
        }
    },
    computed:{
      showswiper(){
        return this.list.length
      }
    }
} 
</script>

<style lang='stylus' scoped>
.wrapper >>> .swiper-pagination-bullet-active
  background:red
.wrapper
  overflow:hidden
  width:100%
  height:0
  padding-bottom:31.8%
  .swiperimg
    width:100%
</style>
